<!--  -->

<script>
import { reactive } from '@/components/vue.api';
import { message } from '@/components'
//import { json } from 'quick.lib'

import TestPlanel from './test-panel.vue'

const testdb = [
  { "ID": 101, "Title": "初始化" },
  { "ID": 201, "Title": "组织2" },
  { "ID": 302, "Title": "组织3" }
]

export default {
  components: { TestPlanel },
  props: {
    /** 组件命名 */
    named: {
      type: [String, Number],
      default: 'textTest'
    },
  },
  setup (props, { emit }) {

    const { frame } = window.$plus;

    const the = reactive({
      show: {
        btnSave: false,
      },
      url: '',
      typeList: ['初始', '正常', '已审', '撤审', '删除'],
      data: {
        radioValue: 2,
        // 演示 json 类型适应，可改为对象测试
        AttrJson: { "a": 1, "b": 2, c: 'text', "536": [1, 2, 3, 4, 5] },
        AttrJsonStr: '',
        ubb: '&lt;b&gt;sdfdsf&lt;/b&gt;',
        html: '<b>测试html</b>',
        ID: 123,
        modelID: 0,
        userId: 0,
        name: null,
        attrv: '标题\r\n内容',
        password: 'abc',
        // type: '初始',
        typeCk: [3],

        tel: 1890000000,
        startDate: '2020-09-02',
        startTime: '12:51:32',
        iso: new Date().toISOString(),
        endTime: new Date().format('yyyy-MM-dd HH:mm:ss.S'),
        pop: '商家名',
        bool: false,
        fileBase64: ''
      },
      /** 规则 */
      rules: {
        password: [
          { "required": true, "message": "请输入密码" },
          { "type": "string", "min": 6, "message": "长度必须大于6位" },
          { 'tip': '测试规则提示' }
        ],
        name: [
          { "required": true, whitespace: true, "message": "请输入" },
        ],
        modelID: [
          { "required": true, "message": "必填" },
          { "type": "number", "message": "请输入数字 ", "trigger": "blur" }
        ],
        attrv: [
          { "type": "string", "min": 6, "message": "长度必须大于6位", "trigger": "blur" },
          { 'tip': '测试规则提示' }
        ]
      },
      // 是否验证通过
      rulesPass: false,
      ui: {
        attr: {
          ID: { v: 0, t: 'Int64', c: 'panel', api: '/Api/QF_Group/' },
          modelID: { v: 0, t: 'Int64' },
          userId: { v: 0, t: 'Int64', c: '' },

          bool: { t: 'bool' },
          tel: { t: 'tel' },
          name: {},
          file: {
            // 图片水印
            mark: { text: 'Quick', font: 'bold 10rem Arial', y: 100 }
          }
        }
      },
      /** 对话框 */
      modal: {
        title: '请勾选',
        show: false
      },
      /** 面板 */
      panel: {
        // 数据源地址
        api: '',
        // 返回绑定的主键
        named: '',
        // 查询字段
        field: {},
        // 查询数据
        list: []
      },
      tag: {
        key: '',
        css: ['default', 'info', 'primary', 'success', 'error', 'warning']
      },
      pop: {
        // 样式定位
        styled: {}
      }
    });


    /**
     * ls 参数
     */
    const bindAttrLS = (_ls) => {
      let _res = {}
      // 正则替换
      _ls.replace(/([^?,]+):([^?,]+)/g, function (s, k, v) {
        // s全部
        //    console.log('s:' + s, k, typeof k, v);
        // 交换key顺序 value
        _res[v] = parseInt(k);
        return v + '=' + k;
      });

      return _res
    }

    the.radioGroupList = bindAttrLS('0:初始,1:正常,2:已审,3:撤审,4:删除');



    const onRespEvent = (resp) => {
      console.log('onRespEvent', resp)
      switch (resp.cmd) {
        case 'error':
          message.error('错误:' + resp.named, { text: resp.message })
          break;
      }
    }

    // 组织点击
    const onInputEvent = (resp) => {
      console.log('onInputEvent:' + props.named, resp);

      switch (resp.cmd) {
        case 'icon':
          // 字段
          the.panel.field = {
            "ID": "编号",
            "Title": "描述"
          }

          // 数据
          the.panel.list = testdb
          the.modal.show = true
          break;

        case 'search':
          // 查询
          break

        case 'InputPlus':
          // 外挂按钮
          the.modal.show = true
          break;
      }

      // 来源组件窗口命名
      resp.byNamed = props.named
      // 上报数据
      emit('onEvent', resp)
    }

    /** 输入事件 */
    // const onInputEvent = (resp) => {

    //   console.log('onInput:', resp);

    //   // the.panel.api = '/Api/QF_Group/'


    //   let _api = '';

    //   if (the.ui.attr && resp.id) {
    //     _api = the.ui.attr[resp.id].api || ''
    //   }


    //   console.log('onInput:' + resp.id, _api);

    //   the.panel.api = _api
    //   the.panel.named = resp.id
    //   // the.modal.show = true
    // }

    /** 日期触发 */
    const onDateEvent = (resp) => {
      console.log('onDateEvent', resp)
      switch (resp.cmd) {
        case 'InputPlus':
          // 输入框外挂事件
          break
      }

    }

    /** 面板触发事件 */
    const onPanelEvent = (resp) => {
      console.log('onPanelEvent:', JSON.stringify(resp));

      switch (resp.cmd) {
        case 'checkAll':
          // 全选
          break;
        case 'checked':
          if (resp.item) {
            // 选择的数据选项
            the.data[resp.named] = resp.item.ID
          }
          // the.modal.show = false
          break;

        case 'close':
          // 关闭窗口
          the.modal.show = false
          break;
      }

    }

    /** 标签事件 */
    const onTagEvent = (resp) => {

      switch (resp.cmd) {

        case 'close':
          // 关闭
          the.tag.css.splice(parseInt(resp.named), 1)
          // 测试外部更新json触发
          console.log(the.data.AttrJson["536"].splice(1, 1))
          the.data.AttrJsonStr = JSON.stringify(the.data.AttrJson)
          // console.log()
          break;
        case 'click':
        default:
          console.log('onTagEvent:', resp);
          break;
      }
    }

    const onSwitch = (resp) => {
      console.log('onSwitch:', resp);
    }

    /** 全选 */
    const onCheckEvent = (resp) => {
      console.log('onCheckEvent:', resp);

      //resp.value 是组件自定义绑定值，根据实际应用定义
      if (resp.value === 'all') {
        // 全选
        let _list = []
        if (resp.checked) {
          // 选中
          for (let i in the.typeList) {
            _list.push(i)
          }
        }
        the.data.typeCk = _list
      }
    }

    /**
     * 提交事件
     */
    const onBtnEvent = () => {
      let res = {
        cmd: 'save',
        named: props.named
      }
      console.log('onBtnEvent', res);

      the.data.AttrJson.test = 'acd'

      the.data.AttrJsonStr = JSON.stringify({ "a": 1, "b": 2, "c": "teggggxt" })

      // 上报数据
      emit('onEvent', res)
    }

    const onRdoEvent = (resp) => {
      the.data.typeCk = [];
      the.data.typeCk.push(resp.value)

      the.data.type = the.typeList[resp.value]
      console.log('onRdoEvent:' + the.data.type, resp);
    }


    const onPlusEvent = (resp) => {
      switch (resp.cmd) {
        case 'InputPlus': //触发控件事件   

          if (resp.event) {
            // 触发当前对象
            const dom = resp.event;
            let _pop = {
              l: dom.offsetLeft,
              t: dom.offsetTop,
              cx: dom.clientX,
              cy: dom.clientY,
              sx: dom.clientX,
              sy: dom.screenX,
              w: dom.screenY,
              h: dom.clientHeight,
              x: dom.layerX,
              y: dom.layerY,
              z: dom.zIndex,
            }
            console.log(_pop)
            the.pop.styled.left = dom.offsetLeft + 'px'
          }

          the.data.bool = !the.data.bool
          break;
        default:

          break;
      }

      console.log(resp)
    }



    /**
     * 回调验证事件
     */
    const onFormEvent = (resp) => {
      console.log('onFormEvent', resp)

      switch (resp.cmd) {
        case 'validator':
          // 数据验证
          the.rulesPass = resp.isPass
          break;
        case 'Keyup':
          console.log('onFormEvent', resp)
          //回车
          //   sendLogin()
          break;
      }
    }

    /**上传事件 */
    const onUploadEvent = (res) => {
      console.log('onUploadEvent:' + res.data.length, res)
      switch (res.cmd) {
        case 'delete':
          console.log('onUploadEvent.', res.cmd)
          break;
        case 'imageZoom':
          frame.open(res.data.name + '<br /><img width="100%" src="' + res.data.src + '" />', res.data.name)
          break;
        case 'base64':
          // 图片转码
          // _data.File.Body = { st: 2, name: '' + data.name + '', size: data.size, content: data.base64 + '' };
          break;
      }
    }

    return { the, onRespEvent, onInputEvent, onPanelEvent, onTagEvent, onSwitch, onCheckEvent, onDateEvent, onPlusEvent, onBtnEvent, onRdoEvent, onFormEvent, onUploadEvent }
  },
}

</script>

<template>
  <div class="text-test-page">
    <Modal :title="the.modal.title"
           :show="the.modal.show"
           footer-hide
           @onEvent="onPanelEvent">
      高级组件 选择查询面板
      <TestPlanel />

      <!-- <PanelForm :named="the.panel.named"
                 :api="the.panel.api"
                 :field="the.panel.field"
                 :list="the.panel.list"
                 @onEvent="onPanelEvent" /> -->
    </Modal>

    <Form class="text-test-page-form"
          label-width="20%"
          label-mark="："
          :model="the.data"
          :rules="the.rules"
          @onEvent="onFormEvent">
      <Field label="主题">
        <Text v-html="the.data.html"></Text>
      </Field>
      <Field label="密码测试"
             prop="password">
        <Input v-model="the.data.password"
               named="password"
               type="password"
               placeholder="Enter password" />
      </Field>

      <Field label="组织ID"> <input v-model.number="the.data.ID"
               type="number" />
        <Input v-model="the.data.ID"
               named="ID"
               class="test-group"
               placeholder="请输入组织ID"
               type="number"
               readonly
               icon="icon-jiantouxia"
               @onEvent="onInputEvent" />
      </Field>
      <Field label="外键查询">
        <Input v-model="the.data.userId"
               named="userId"
               placeholder="请输入ID"
               type="tel"
               icon="icon-sousuo"
               @onEvent="onInputEvent" />
      </Field>

      <Field label="输入name"
             prop="name">
        <Input v-model="the.data.name"
               placeholder="请输入姓名" />
      </Field>
      <Field label="modelID"
             prop="modelID">
        <Input v-model="the.data.modelID"
               type="number"
               placeholder="请输入" />
      </Field>
      <Field label="attrv">
        <Textarea v-model="the.data.attrv"
                  placeholder="请输入多行文本框"
                  spellcheck="false"
                  rows="15"
                  @onEvent="onRespEvent" />
      </Field>
      <Field label="attrv">
        <Textarea v-model="the.data.attrv"
                  placeholder="请输入多行文本框"
                  spellcheck="false"
                  rows="3"
                  disabled="disabled"
                  @onEvent="onRespEvent" />
      </Field>
      <Field label="AttrJsonStr">
        <TextJson v-model="the.data.AttrJsonStr"
                  placeholder="请输入json"
                  rows="3"
                  @onEvent="onRespEvent" />
      </Field>
      <Field label="AttrJson">
        <TextJson v-model="the.data.AttrJson"
                  placeholder="请输入json"
                  rows="5"
                  @onEvent="onRespEvent" />
      </Field>

      <Field label="AttrJson">
        <TextJson v-model="the.data.AttrJson"
                  placeholder="请输入json"
                  rows="5"
                  :disabled="true"
                  @onEvent="onRespEvent" />
      </Field>

      <Field label="ubb">
        <TextUbb v-model="the.data.ubb"
                 rows="5"
                 @onEvent="onRespEvent" />
      </Field>
      <Field label="ubb">
        <!-- format
        <TextUbb v-model="the.data.ubb"
                 rows="5"
                 disabled="disabled"
                 @onEvent="onRespEvent" /> -->
      </Field>
      <Field label="图标">
        <Icon type="icon-star" />

        <Badge dot>
          测试dot
        </Badge>

        <Badge text="99+">
          测试文本
        </Badge>
      </Field>
      <Field>
        <Tag v-for="(item, index) in the.tag.css"
             :key="index"
             :named="index"
             :css="item"
             closable
             @onEvent="onTagEvent">
          {{ item }}
        </Tag>
      </Field>

      <Field label="radioValue"
             tip="测试">
        <Select v-model="the.data.radioValue"
                @onEvent="onRespEvent"
                :list="the.radioGroupList">
          <!-- <option v-for="(value,key) in the.radioGroupList"
                  :key="key"
                  :value="value">
            {{key}} - {{ value }}
          </option> -->
        </Select>
        {{the.data.type}}
      </Field>

      <Field label="多选">
        <Checkbox value="all"
                  @onEvent="onCheckEvent" /> 全选

        <Checkbox v-for="(item, index) in the.typeList"
                  :key="index"
                  v-model="the.data.typeCk"
                  :value="index">
          {{ item }}
        </Checkbox>
      </Field>
      <Field label="群组">
        <!-- name:自定义群组名 -->
        <RadioGroup v-model="the.data.radioValue"
                    :list="the.radioGroupList" />
      </Field>
      <Field label="群组2">
        <!-- name:自定义群组名 -->
        <RadioGroup v-model="the.data.radioValue"
                    :list="the.radioGroupList"
                    @onEvent="onRdoEvent" />
      </Field>
      <Field label=" 单项用">
        <Switch v-model="the.data.bool"
                @onEvent="onSwitch" />

        <Switch v-model="the.data.bool"
                disabled="disabled"
                @onEvent="onSwitch" />

        <span style="padding:0 0.5rem;">
          <!--   @onEvent="监听事件" -->
          <Radio v-model="the.data.bool"
                 :value="true">是</Radio>

          <Radio v-model="the.data.bool"
                 :value="false">
            否</Radio>
        </span>
      </Field>
      <Field label="开始日期">
        <DatePicker v-model="the.data.startDate"
                    type="date"
                    placeholder="请选择日期" />
        <TimePicker v-model="the.data.startTime"
                    placeholder="请选择日期与时间" />
      </Field>

      <Field label="截止时间ISO"
             tip="ISO 时间格式">
        <DatePicker v-model="the.data.iso"
                    mark="iso"
                    type="datetime"
                    placeholder="请选择日期与时间" />
      </Field>

      <Field label="截止时间">
        <DatePicker v-model="the.data.endTime"
                    type="datetime"
                    placeholder="请选择日期与时间" />
      </Field>

      <Field label="外键商家">
        <Input v-model="the.data.pop"
               icon="icon-shangdian"
               placeholder="请输入商家ID"
               @onEvent="onPlusEvent" />
        <Poptip v-if="the.data.bool"
                :style="the.pop.styled"
                class="pop-shop-text">
          <ul>
            <li>全局测试列表</li>
            <li>测试列表2</li>
          </ul>
        </Poptip>
      </Field>
      <Field label="附件">
        <Upload v-model="the.data.fileBase64"
                :mark="the.ui.attr.file.mark"
                @onEvent="onUploadEvent">图片</Upload>
      </Field>
      <Field label="附件">
        <Upload named="file"
                :multiple="false"
                type="execl"
                @onEvent="onUploadEvent">上传文件</Upload>
      </Field>
      <Field>
        <Tooltip content="提交按钮测试">
          <Button type="primary"
                  long
                  :loading="the.show.btnSave"
                  icon="icon-sousuo"
                  @click="onBtnEvent">
            提交
          </Button>
        </Tooltip>
        <Tooltip content="重置sdfdasfasfasf数据fas3344sadfasdfs触发当前对象触发当前对象触发当前对象触发当前对象"
                 style="margin-left:1rem">
          <Button>
            重置
          </Button>
        </Tooltip>
      </Field>

    </Form>
    <TextJson v-model="the.data"
              rows="5"
              @onEvent="onRespEvent" />
  </div>
</template>

<style lang='less' >
.text-test-page {
  .data-test {
    padding: 0.5rem 1rem;
  }

  .test-group {
    width: 8rem;
  }

  &-form {
    padding: 1rem 2rem;
  }

  .pop-shop-text {
    li {
      padding: 1rem;
      border-bottom: 1px solid #eee;
    }

    li:hover {
      background-color: aqua;
    }
  }
}
</style>